<template>
	<view class="content">
		<!-- 首页背景图 -->
		<view>
			<u--image :src="src" width="100%" height="280rpx" :fade="true" duration="450"></u--image>
		</view>
		<!-- 导航栏 -->
		<view class="navigationBarImg">
				<u--image src="../../static/rankinglist.png" width="105rpx" height="105rpx" @click="ranking"></u--image>
				
				<u--image src="../../static/voluntaryActivity.png" width="95rpx" height="95rpx" @click="voluntary"></u--image>
				
				<u--image src="../../static/lostFound.png" width="105rpx" height="105rpx" @click="lostAndFound"></u--image>
				
				<u--image src="../../static/detail.png" width="100rpx" height="100rpx" @click="detail"></u--image>
		</view>
		<view class="navigationBarTxt">
			<view>积分排行</view>
			<view>志愿活动</view>
			<view>失物招领</view>
			<view>检查详情</view>
		</view>
		<!-- 活动推荐部分 -->
		<view class="primary">
			<view class="character">
				大家都在参与
			</view>
			<view class="indicatorBar">
				<u-scroll-list indicatorBarWidth="40rpx" :indicator="indicator">
					<view v-for="(item, index) in list" :key="index" @click="open(item)">
						<view class="indicatorImage">
							<u--image :src="item.thumb" width="250rpx" height="150rpx" radius="12rpx" ></u--image>
						</view>
					</view>
				</u-scroll-list>
			</view>
			<!-- 动态部分 -->
			<view class="character">动态</view>
			<view v-for="(item,index) in dynamicState" :key="index" class="dynamicState" @click="DynamicDetails(item)">
				<view class="PIM">
					<u--image :src="item.touxiang" width="100rpx" height="100rpx" shape="circle"></u--image>
					<u--text :text="item.name" margin="30rpx" size="35rpx"></u--text>
					<view class="date">{{item.date}}</view>
				</view>
				<view class="activityContent">
					<u--text :lines="1" :text="item.activity"></u--text>
					<u--image :src="item.dynamicStateImg" width="200rpx" height="200rpx" :fade="true" duration="450"></u--image>
				</view>
				<view class="behavior">
					<u-icon :name="icon" size="60rpx" label="点赞" @click="dianzan"></u-icon>
					<u-icon name="chat" size="60rpx" label="评论"></u-icon>
					<u-icon name="man-add" size="60rpx" label="点击参加"></u-icon>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				src: "../../static/OIP-C.jpg",//页面背景图
				indicator: false,//是否显示推荐活动部分滚动条
				//推荐活动部分的图片
				list: [{
					thumb: "https://cdn.uviewui.com/uview/goods/1.jpg"
				}, {
					thumb: "https://cdn.uviewui.com/uview/goods/2.jpg"
				}, {
					thumb: "https://cdn.uviewui.com/uview/goods/3.jpg"
				}, {
					thumb: "https://cdn.uviewui.com/uview/goods/4.jpg"
				}, {
					thumb: "https://cdn.uviewui.com/uview/goods/5.jpg"
				}],
				//动态数据
				dynamicState: [{
					touxiang:"../../static/OIP-C.jpg",
					name:"敲代码",
					date: "2021-11-29",
					activity: "发布了志愿活动：打扫10栋208",
					dynamicStateImg: "../../static/OIP-C.jpg",
				},{
					touxiang:"../../static/OIP-C.jpg",
					name:"敲代码",
					date: "2021-11-29",
					activity: "发布了志愿活动：打扫10栋208",
					dynamicStateImg: "../../static/OIP-C.jpg",
				},{
					touxiang:"../../static/OIP-C.jpg",
					name:"敲代码",
					date: "2021-11-29",
					activity: "发布了志愿活动：打扫10栋208",
					dynamicStateImg: "../../static/OIP-C.jpg",
				}],
				//点赞图标
				icon:"thumb-up"
			}
		},

		methods: {
			//点击跳转详情页
			DynamicDetails(item){
				console.log(item)
				uni.navigateTo({
					url:"./dynamicDetails"
				})
			},
			//点击推荐部分跳转详情页
			open(item){
				console.log(111)
				uni.navigateTo({
					url:"./recommendDetail?imgSrc="+item.thumb
					// url:"./recommendDetail"
				})
			},
			//点赞效果的实现
			dianzan(){
				if(this.icon === "thumb-up-fill"){
					this.icon = "thumb-up"
				} else {
					this.icon = "thumb-up-fill"
				}
			},
			//点击排行榜图标
			ranking(){
				uni.navigateTo({
					url:"./rankingList"
				})
			},
			//点击志愿活动图标
			voluntary(){
				uni.navigateTo({
					url:"./voluntaryActivity"
				})
			},
			//点击失物招领图标
			lostAndFound(){
				uni.navigateTo({
					url:"./lostAndFound"
				})
			},
			//点击检查详情图标
			detail(){
				uni.navigateTo({
					url:"./detail"
				})
			}
		},
	}
</script>

<style lang="scss">
	html {
		-webkit-text-size-adjust: none;
	}

	.content {
		padding: 12rpx;
		font-family: 'KaiTi','Times New Roman', Times, serif;
		// width: 100%;
	}
	//导航栏图标
	.navigationBarImg {
		display: flex;
		// width: 100% !important;
		height: 120rpx;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		margin-top: 20rpx;
		background-color: #DCDCDC;
		box-shadow: 0px 0px 8px #d5d5d6;
		border-radius: 16rpx 16rpx 0rpx 0rpx;
	}
	//导航栏文字
	.navigationBarTxt {
		display: flex;
		height: 60rpx;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		background-color: #DCDCDC;
		box-shadow: 0px 0px 8px #d5d5d6;
		margin-bottom: 10rpx;
		border-radius: 0rpx 0rpx 16rpx 16rpx;
	}
	//推荐活动部分（大家都在参与）
	.primary{
		padding: 5rpx;
	}
	
	.indicatorBar {
		margin: 15rpx;
	}
	
	.indicatorImage {
		margin-left: 20rpx;
	}
	//文字（如大家都在参与，动态字样）
	.character {
		font-size: 30rpx;
		margin-bottom: 10rpx;
		padding-left: 16rpx
	}
	//动态里的个人信息栏
	.PIM{
		display: flex;
		text-align: center;
		// flex-direction: row;
		// text-align: flex-end;
		height: 100rpx;
		padding-left: 16rpx;
		margin-top: 10rpx;
	}
	//动态里的时间
	.date{
		margin: 10rpx 42rpx 0rpx 0rpx;
		font-size: 30rpx;
	}
	//动态里的点赞，评论，点击参加部分
	.behavior{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-top: 18rpx;
	}
	//动态里的活动部分
	.activityContent{
		margin-top: 18rpx;
	}
	//动态
	.dynamicState{
		box-shadow: 0px 0px 8px #d5d5d6;
		height: 450rpx;
		padding: 20rpx;
		margin-bottom: 10rpx;
		border-radius: 16rpx;
	}
</style>